<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
        <link href="dracula.min.css" rel="stylesheet">
        <script src="highlight.min.js"></script>
        <link href="quill.css" rel="stylesheet">
        <script src="quill.js "></script>
        <script src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
        <style>

            * {
                padding: 0;
                margin: 0;
            }

            body {
                background-color: #fff;
            }

            .ql-container.ql-snow {
                border: none;
                min-height: 300px;
                padding-bottom: 30px;
            }


            .ql-toolbar.ql-snow {
                width: 100%;
                border: none;
                border-top: 1px solid #ebebeb;
                border-bottom: 1px solid #ebebeb;
                position: fixed;
                bottom: 0;
                left: 0;
                z-index: 6666;
                background-color: #fff;
            }

            .ql-toolbar.ql-snow .ql-formats {
                display: flex;
                justify-content: flex-end;
            }

            .ql-snow .ql-picker.ql-expanded .ql-picker-options {
                top: -230px;
            }

            .ql-editor {
                height: initial;
            }

        </style>
    </head>
    <body>
        <div id="editor"></div>

        <script>


            let upLoadImg = ({ file }) => {
                return new Promise((resolve,reject) => {
                    let token = window.token
                    let key = `question/${Date.now()}`
                    let config = {
                        useCdnDomain:true,
                        region:qiniu.region.z0
                    }
                    let putExtra = {
                        fname:file.name,
                        params:{},
                        mimeType:['image/png','image/jpeg','image/jpg']
                    }
                    let observe = {
                        next () {
                        },
                        error () {
                            reject()
                        },
                        complete (res) {
                            resolve(res)
                        }
                    }
                    let observable = qiniu.upload(file,key,token,putExtra,config)
                    observable.subscribe(observe)
                })
            }

            let quill = new Quill('#editor',{
                theme:'snow',
                modules:{
                    toolbar:{
                        container:[
                            { 'header':[1,2,3,4,5,6,false] },
                            'bold',
                            'italic',
                            'underline',
                            'strike',
                            'blockquote',
                            'code-block',
                            { 'list':'bullet' },
                            'image'
                        ],
                        handlers:{
                            'image':function () {
                                let fileInput = this.container.querySelector('input.ql-image[type=file]')
                                if (fileInput == null) {
                                    fileInput = document.createElement('input')
                                    fileInput.setAttribute('type','file')
                                    fileInput.setAttribute('accept','image/*')
                                    fileInput.classList.add('ql-image')
                                    fileInput.addEventListener('change',async () => {
                                        if (fileInput.files != null && fileInput.files[0] != null) {
                                            let res = await upLoadImg({ file:fileInput.files[0] })
                                            let range = quill.getSelection()
                                            if (range) {
                                                quill.insertEmbed(range.index,'image',`http://cdn.sujie.ink/${res.key}`)
                                            }
                                        }
                                    })
                                    this.container.appendChild(fileInput)
                                }
                                fileInput.click()
                            }
                        }
                    },
                    syntax:true

                },
                placeholder:' 对问题补充说明，可以更快获得解答(不写也么问题!) '
            })

            document.querySelector('.ql-editor').style.maxHeight = document.documentElement.clientHeight - 50 + 'px'

            window.document.addEventListener('message',function (event) {
                let data = JSON.parse(event.data)
                if (data.type === 'getHtml') {
                    window.ReactNativeWebView.postMessage(JSON.stringify({
                        content_html:quill.container.firstChild.innerHTML,
                        content:quill.getText(),
                        type:'getHtml',
                        content_length:quill.getLength() - 1
                    }))
                } else if (data.type === 'token') {
                    window.token = data.token
                }
            })
            window.addEventListener('resize',() => {
                document.querySelector('.ql-editor').style.maxHeight = document.documentElement.clientHeight - 50 + 'px'
            })
        </script>
    </body>
</html>
